<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 过渡和动画的区别：
        过渡transition: 一般和hover一起使用
        动画animation ： 页面一打开，动画就执行了，动画需要设置关键帧
        */
        div {
            width: 200px;
            height: 200px;
            background: blue;
            /* animation-name 动画名称 */
            animation-name: move;
            /*  animation-duration 动画的持续时间*/
            animation-duration: 2s;
            /* animation-fill-mode 动画是否返回原来的位置，forwards 不需要返回原位置 */
            animation-fill-mode: forwards;
        }

        /* 动画关键帧       动画的名称  */
        /* @keyframes move {
            from {
                width: 200px;
            }

            to {
                width: 600px;
            }
        } */

        @keyframes move {
            0% {
                width: 200px;
            }

            43% {
                background: orange;
            }

            100% {
                width: 600px;
                background: red;
            }
        }

        /* 动画效果的关键帧有两种方式：
        1.from to
        2. 百分比 更常用一些
        */
    </style>
</head>

<body>
    <div></div>
</body>

</html>